CSS实战笔记(十二) 图片等比例缩放

您所在的位置：网站首页 › css 缩放比 › CSS实战笔记(十二) 图片等比例缩放

CSS实战笔记(十二) 图片等比例缩放

2023-06-14 05:39| 来源: 网络整理| 查看: 265

1、背景

在网页展示图片是一个很常见的需求，大多数情况下，展示区域的大小是固定的，原图片的大小也是固定的

如果展示区域的宽高和原图片的宽高不等比例，那么在默认情况下很可能会压缩或拉伸图片以适应区域大小

下面我们用两张图片做一个对比实验，假设展示区域的宽高都是 300px

横向图片的宽高分别是 722px 和 88px，纵向图片的宽高分别是 80px 和 525px

.image { width: 300px; height: 300px; } 复制代码

在这里插入图片描述

2、设置 CSS

很显然，这并不是我们想要的，因为它会导致图片变形压缩，我们需要找到一种办法，能让图片等比例缩放

最简单的方法莫过于设置 CSS，使得图片可以自动适应展示区域的大小，代码非常简单

.image-box { width: 300px; height: 300px; } .image { width: auto; height: auto; max-width: 100%; max-height: 100%; } 复制代码

在这里插入图片描述

3、使用 canvas

设置 CSS 样式之后，图片会按照最小边进行等比例缩放，这种解决办法已经可以满足大多数的使用场景

但有时候我们会希望展示区域被占满，鱼和熊掌不可兼得，这时我们不得不裁剪图片能够等比例缩放的最大区域

实际上就是用一个与展示区域等比例的矩形截取图片，并要求截取出来的图片尽可能大且位于原图片的中心位置

在这里插入图片描述

window.onload = function() { let cvs = document.querySelector('#image') let ctx = cvs.getContext('2d') let img = new Image() img.src = 'test.png' img.onload = () => { let adaptedImage = adaptImage(0, 0, img.width, img.height, 0, 0, cvs.width, cvs.height) ctx.drawImage(img, ...adaptedImage) } } function adaptImage(imgX, imgY, imgW, imgH, cvsX, cvsY, cvsW, cvsH) { let idealW = imgW let idealH = cvsH + (imgW - cvsW) * (cvsH / cvsW) if (idealH

【本文地址】

CSS实战笔记(十二) 图片等比例缩放

CSS实战笔记(十二) 图片等比例缩放

今日新闻

推荐新闻